/* Copyright (C) 2021 changwei@iscas.ac.cn
* 
* Apache License Version 2.0许可头：
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* 
*    http://www.apache.org/licenses/LICENSE-2.0
* 
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
<template>
  <el-table
    v-bind:data="dataSource"
    :header-cell-style="rowStyle"
    style="width: 100%"
    :cell-style="{ textAlign: 'center' }"
  >
    <el-table-column prop="ha1" label="" width="150">
      <el-table-column prop="ha2" label="特性/主题" width="150">
        <template slot-scope="scope">
          <a :href="scope.row.url" target="_blank">{{ scope.row.ha2 }}</a>
        </template>
      </el-table-column>
    </el-table-column>

    <el-table-column prop="hb1" label="开发环境准备" width="150">
      <el-table-column
        prop="hb2"
        label="IDE、源码、HPM"
        width="80"
        :render-header="renderHeader"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.hb2 == 1">
            <el-tag disable-transitions type="success">✓</el-tag>
          </div>
        </template>
      </el-table-column>
    </el-table-column>

    <el-table-column prop="hd1" label="内核" width="150">
      <el-table-column
        prop="hd2"
        label="LiteOS-m"
        width="50"
        :render-header="renderHeader"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.hd2 == 1">
            <el-tag disable-transitions type="success">✓</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="hd3"
        label="LiteOS-a"
        width="50"
        :render-header="renderHeader"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.hd3 == 1">
            <el-tag disable-transitions type="success">✓</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="hd4"
        label="Linux"
        width="50"
        :render-header="renderHeader"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.hd4 == 1">
            <el-tag disable-transitions type="success">✓</el-tag>
          </div>
        </template>
      </el-table-column>
    </el-table-column>

    <el-table-column prop="he1" label="驱动" width="150">
      <el-table-column
        prop="he2"
        label="HDF驱动开发"
        width="50"
        :render-header="renderHeader"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.he2 == 1">
            <el-tag disable-transitions type="success">✓</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="he3"
        label="平台驱动（IP驱动）"
        width="50"
        :render-header="renderHeader"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.he3 == 1">
            <el-tag disable-transitions type="success">✓</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="he4"
        label="外设驱动"
        width="50"
        :render-header="renderHeader"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.he4 == 1">
            <el-tag disable-transitions type="success">✓</el-tag>
          </div>
        </template>
      </el-table-column>
    </el-table-column>

    <el-table-column prop="hf1" label="组件(Bundle)开发" width="150">
      <el-table-column
        prop="hf2"
        label="组件(Bundle)开发"
        width="80"
        :render-header="renderHeader"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.hf2 == 1">
            <el-tag disable-transitions type="success">✓</el-tag>
          </div>
        </template>
      </el-table-column>
    </el-table-column>

    <el-table-column prop="hg1" label="子系统" width="150">
      <el-table-column
        prop="hg2"
        label="编译构建"
        width="50"
        :render-header="renderHeader"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.hg2 == 1">
            <el-tag disable-transitions type="success">✓</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="hg3"
        label="分布式远程启动"
        width="50"
        :render-header="renderHeader"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.hg3 == 1">
            <el-tag disable-transitions type="success">✓</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="hg4"
        label="图形图像"
        width="50"
        :render-header="renderHeader"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.hg4 == 1">
            <el-tag disable-transitions type="success">✓</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="hg5"
        label="媒体"
        width="50"
        :render-header="renderHeader"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.hg5 == 1">
            <el-tag disable-transitions type="success">✓</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="hg6"
        label="AI框架"
        width="50"
        :render-header="renderHeader"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.hg6 == 1">
            <el-tag disable-transitions type="success">✓</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="hg7"
        label="Sensor服务"
        width="70"
        :render-header="renderHeader"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.hg7 == 1">
            <el-tag disable-transitions type="success">✓</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="hg8"
        label="用户程序框架"
        width="50"
        :render-header="renderHeader"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.hg8 == 1">
            <el-tag disable-transitions type="success">✓</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="hg9"
        label="OTA升级"
        width="50"
        :render-header="renderHeader"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.hg9 == 1">
            <el-tag disable-transitions type="success">✓</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="hg10"
        label="安全"
        width="50"
        :render-header="renderHeader"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.hg10 == 1">
            <el-tag disable-transitions type="success">✓</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="hg11"
        label="启动恢复"
        width="50"
        :render-header="renderHeader"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.hg11 == 1">
            <el-tag disable-transitions type="success">✓</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="hg12"
        label="测试"
        width="50"
        :render-header="renderHeader"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.hg12 == 1">
            <el-tag disable-transitions type="success">✓</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="hg13"
        label="XTS认证"
        width="70"
        :render-header="renderHeader"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.hg13 == 1">
            <el-tag disable-transitions type="success">✓</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="hg14"
        label="IOT硬件"
        width="50"
        :render-header="renderHeader"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.hg14 == 1">
            <el-tag disable-transitions type="success">✓</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="hg15"
        label="通信"
        width="50"
        :render-header="renderHeader"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.hg15 == 1">
            <el-tag disable-transitions type="success">✓</el-tag>
          </div>
        </template>
      </el-table-column>
    </el-table-column>

    <el-table-column prop="hh1" label="隐私与安全" width="150">
      <el-table-column
        prop="hh2"
        label="隐私与安全"
        width="50"
        :render-header="renderHeader"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.hh2 == 1">
            <el-tag disable-transitions type="success">✓</el-tag>
          </div>
        </template>
      </el-table-column>
    </el-table-column>

    <el-table-column prop="hi1" label="SOC移植适配" width="150">
      <el-table-column
        prop="hi2"
        label="SOC移植适配"
        width="50"
        :render-header="renderHeader"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.hi2 == 1">
            <el-tag disable-transitions type="success">✓</el-tag>
          </div>
        </template>
      </el-table-column>
    </el-table-column>
  </el-table>
</template>
<script>
export default {
  props: {
    dataSource: "List",
  },
  methods: {
    renderHeader(h, { column, $index }) {
      if ($index === 1) {
        return <a href="https://gitee.com/openharmony-sig/knowledge/blob/master/%E8%AE%BE%E5%A4%87%E5%BC%80%E5%8F%91/OpenHarmony/%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83%E5%87%86%E5%A4%87/IDE%E3%80%81%E6%BA%90%E7%A0%81%E3%80%81HPM.md" target="_blanc">IDE、源码、HPM</a>;
      } else if ($index === 2) {
        return <a href="https://gitee.com/openharmony-sig/knowledge/blob/master/%E8%AE%BE%E5%A4%87%E5%BC%80%E5%8F%91/OpenHarmony/%E5%86%85%E6%A0%B8/LiteOS-m.md" target="_blanc">LiteOS-m</a>;
      } else if ($index === 3) {
        return <a href="https://gitee.com/openharmony-sig/knowledge/blob/master/%E8%AE%BE%E5%A4%87%E5%BC%80%E5%8F%91/OpenHarmony/%E5%86%85%E6%A0%B8/LiteOS-a.md" target="_blanc">LiteOS-a</a>;
      } else if ($index === 4) {
        return <a href="https://gitee.com/openharmony-sig/knowledge/blob/master/%E8%AE%BE%E5%A4%87%E5%BC%80%E5%8F%91/OpenHarmony/%E5%86%85%E6%A0%B8/Linux.md" target="_blanc">Linux</a>;
      } else if ($index === 5) {
        return <a href="https://gitee.com/openharmony-sig/knowledge/blob/master/%E8%AE%BE%E5%A4%87%E5%BC%80%E5%8F%91/OpenHarmony/%E9%A9%B1%E5%8A%A8/HDF%E9%A9%B1%E5%8A%A8%E5%BC%80%E5%8F%91.md" target="_blanc">HDF驱动开发</a>;
      } else if ($index === 6) {
        return <a href="https://gitee.com/openharmony-sig/knowledge/blob/master/%E8%AE%BE%E5%A4%87%E5%BC%80%E5%8F%91/OpenHarmony/%E9%A9%B1%E5%8A%A8/%E5%B9%B3%E5%8F%B0%E9%A9%B1%E5%8A%A8.md" target="_blanc">平台驱动（IP驱动）</a>;
      } else if ($index === 7) {
        return <a href="https://gitee.com/openharmony-sig/knowledge/blob/master/%E8%AE%BE%E5%A4%87%E5%BC%80%E5%8F%91/OpenHarmony/%E9%A9%B1%E5%8A%A8/%E5%A4%96%E8%AE%BE%E9%A9%B1%E5%8A%A8.md" target="_blanc">外设驱动</a>;
      } else if ($index === 8) {
        return <a href="https://gitee.com/openharmony-sig/knowledge/blob/master/%E8%AE%BE%E5%A4%87%E5%BC%80%E5%8F%91/OpenHarmony/%E7%BB%84%E4%BB%B6(Bundle)%E5%BC%80%E5%8F%91/%E7%BB%84%E4%BB%B6(Bundle)%E5%BC%80%E5%8F%91.md" target="_blanc">组件(Bundle)开发</a>;
      } else if ($index === 9) {
        return <a href="https://gitee.com/openharmony-sig/knowledge/blob/master/%E8%AE%BE%E5%A4%87%E5%BC%80%E5%8F%91/OpenHarmony/%E5%AD%90%E7%B3%BB%E7%BB%9F/%E7%BC%96%E8%AF%91%E6%9E%84%E5%BB%BA.md" target="_blanc">编译构建</a>;
      } else if ($index === 10) {
        return <a href="https://gitee.com/openharmony-sig/knowledge/blob/master/%E8%AE%BE%E5%A4%87%E5%BC%80%E5%8F%91/OpenHarmony/%E5%AD%90%E7%B3%BB%E7%BB%9F/%E5%88%86%E5%B8%83%E5%BC%8F%E8%BF%9C%E7%A8%8B%E5%90%AF%E5%8A%A8.md" target="_blanc">分布式远程启动</a>;
      } else if ($index === 11) {
        return <a href="https://gitee.com/openharmony-sig/knowledge/blob/master/%E8%AE%BE%E5%A4%87%E5%BC%80%E5%8F%91/OpenHarmony/%E5%AD%90%E7%B3%BB%E7%BB%9F/%E5%9B%BE%E5%BD%A2%E5%9B%BE%E5%83%8F.md" target="_blanc">图形图像</a>;
      } else if ($index === 12) {
        return <a href="https://gitee.com/openharmony-sig/knowledge/blob/master/%E8%AE%BE%E5%A4%87%E5%BC%80%E5%8F%91/OpenHarmony/%E5%AD%90%E7%B3%BB%E7%BB%9F/%E5%AA%92%E4%BD%93.md" target="_blanc">媒体</a>;
      } else if ($index === 13) {
        return <a href="https://gitee.com/openharmony-sig/knowledge/blob/master/%E8%AE%BE%E5%A4%87%E5%BC%80%E5%8F%91/OpenHarmony/%E5%AD%90%E7%B3%BB%E7%BB%9F/AI%E6%A1%86%E6%9E%B6.md" target="_blanc">AI框架</a>;
      } else if ($index === 14) {
        return <a href="https://gitee.com/openharmony-sig/knowledge/blob/master/%E8%AE%BE%E5%A4%87%E5%BC%80%E5%8F%91/OpenHarmony/%E5%AD%90%E7%B3%BB%E7%BB%9F/Sensor%E6%9C%8D%E5%8A%A1.md" target="_blanc">Sensor服务</a>;
      } else if ($index === 15) {
        return <a href="https://gitee.com/openharmony-sig/knowledge/blob/master/%E8%AE%BE%E5%A4%87%E5%BC%80%E5%8F%91/OpenHarmony/%E5%AD%90%E7%B3%BB%E7%BB%9F/%E7%94%A8%E6%88%B7%E7%A8%8B%E5%BA%8F%E6%A1%86%E6%9E%B6.md" target="_blanc">用户程序框架</a>;
      } else if ($index === 16) {
        return <a href="https://gitee.com/openharmony-sig/knowledge/blob/master/%E8%AE%BE%E5%A4%87%E5%BC%80%E5%8F%91/OpenHarmony/%E5%AD%90%E7%B3%BB%E7%BB%9F/OTA%E5%8D%87%E7%BA%A7.md" target="_blanc">OTA升级</a>;
      } else if ($index === 17) {
        return <a href="https://gitee.com/openharmony-sig/knowledge/blob/master/%E8%AE%BE%E5%A4%87%E5%BC%80%E5%8F%91/OpenHarmony/%E5%AD%90%E7%B3%BB%E7%BB%9F/%E5%AE%89%E5%85%A8.md" target="_blanc">安全</a>;
      } else if ($index === 18) {
        return <a href="https://gitee.com/openharmony-sig/knowledge/blob/master/%E8%AE%BE%E5%A4%87%E5%BC%80%E5%8F%91/OpenHarmony/%E5%AD%90%E7%B3%BB%E7%BB%9F/%E5%90%AF%E5%8A%A8%E6%81%A2%E5%A4%8D.md" target="_blanc">启动恢复</a>;
      } else if ($index === 19) {
        return <a href="https://gitee.com/openharmony-sig/knowledge/blob/master/%E8%AE%BE%E5%A4%87%E5%BC%80%E5%8F%91/OpenHarmony/%E5%AD%90%E7%B3%BB%E7%BB%9F/%E6%B5%8B%E8%AF%95.md" target="_blanc">测试</a>;
      } else if ($index === 20) {
        return <a href="https://gitee.com/openharmony-sig/knowledge/blob/master/%E8%AE%BE%E5%A4%87%E5%BC%80%E5%8F%91/OpenHarmony/%E5%AD%90%E7%B3%BB%E7%BB%9F/XTS%E8%AE%A4%E8%AF%81.md" target="_blanc">XTS认证</a>;
      } else if ($index === 21) {
        return <a href="https://gitee.com/openharmony-sig/knowledge/blob/master/%E8%AE%BE%E5%A4%87%E5%BC%80%E5%8F%91/OpenHarmony/%E5%AD%90%E7%B3%BB%E7%BB%9F/IOT%E7%A1%AC%E4%BB%B6.md" target="_blanc">IOT硬件</a>;
      } else if ($index === 22) {
        return <a href="https://gitee.com/openharmony-sig/knowledge/blob/master/%E8%AE%BE%E5%A4%87%E5%BC%80%E5%8F%91/OpenHarmony/%E5%AD%90%E7%B3%BB%E7%BB%9F/%E9%80%9A%E4%BF%A1.md" target="_blanc">通信</a>;
      } else if ($index === 23) {
        return <a href="https://gitee.com/openharmony-sig/knowledge/blob/master/%E8%AE%BE%E5%A4%87%E5%BC%80%E5%8F%91/OpenHarmony/%E5%AD%90%E9%9A%90%E7%A7%81%E4%B8%8E%E5%AE%89%E5%85%A8/%E9%9A%90%E7%A7%81%E4%B8%8E%E5%AE%89%E5%85%A8.md" target="_blanc">隐私与安全</a>;
      } else if ($index === 24) {
        return <a href="https://gitee.com/openharmony-sig/knowledge/blob/master/%E8%AE%BE%E5%A4%87%E5%BC%80%E5%8F%91/OpenHarmony/SOC%E7%A7%BB%E6%A4%8D%E9%80%82%E9%85%8D/SOC%E7%A7%BB%E6%A4%8D%E9%80%82%E9%85%8D.md" target="_blanc">SOC移植适配</a>;
      }
    },
    rowStyle({ row, column, rowIndex, columnIndex }) {
      if (
        (columnIndex === 1 && rowIndex >= 0) ||
        (columnIndex === 2 && rowIndex >= 0)
      ) {
        return "background-color:#98FB98;text-align:center;";
      } else if (
        ((columnIndex === 3 || columnIndex === 4) && rowIndex >= 0) ||
        (rowIndex == 1 && columnIndex >= 4 && columnIndex <= 9)
      ) {
        return "background-color:#FFFF00;text-align:center;";
      } else {
        return "background-color:#87CEFA;text-align:center;";
      }
    },
  },
};
</script>